<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/scripts/jquery.js" type="text/javascript"></script>
    <script src="/scripts/semantic.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/themes/semantic.min.css">
    <title>注册</title>

</head>
<body>

<div class="ui inverted attachted top stackable menu">
    <div href="" class="item" style="margin-left: 150px;">我的博客</div>
    <div class="header active item">
        <a href="/">首页</a>
    </div>
    <a href="/message/list" class="item">留言</a>
    <div class="item">
        <div class="ui icon mini input">
            <i class="search icon"></i>
            <input type="text" name="searchtext" placeholder="查找...">
        </div>
    </div>
    <div class="right menu">
    <#if (session.user)??>
        <a class="item"><i class="user icon"></i>${(session.user.nickname)!''}</a>
        <a href="/logout" class="item">登出</a>
    <#else>
        <a href="/login" class="item">登录</a>
        <a href="/reg" class="item">注册</a>
    </#if>
    </div>
</div>


<div class="ui stackable middle aligned centered grid container">
    <div class="ui row" style="margin-top: 50px;">
        <div class="ui six wide column">
            <div class="ui centered header"><h1>注册</h1></div>
        </div>
    </div>

    <!-- ${errMsg!''} -->

    <div class="ui six wide column">
        <form action="regCheck" method="post" class="ui form" id="reg-form">
            <div class="ui error message"></div>
            <div class="ui segment">
                <div class="field">
                    <div class="ui fluid left icon input">
                        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"/>
                        <i class="user icon"></i>
                    </div>
                </div>
                <div class="field">
                    <div class="ui fluid left icon input">
                        <input type="text" name="nickname" placeholder="请输入昵称" autocomplete="off"/>
                        <i class="user icon"></i>
                    </div>
                </div>
                <div class="field">
                    <div class="ui fluid left icon input">
                        <input type="password" name="password" placeholder="请输入密码" autocomplete="off"/>
                        <i class="lock icon"></i>
                    </div>
                </div>
                <div class="field">
                    <div class="ui fluid left icon input">
                        <input type="password" name="password2" placeholder="请确认密码" autocomplete="off"/>
                        <i class="lock icon"></i>
                    </div>
                </div>
                <input type="hidden" value="${captcha!''}"/>

                <div class="ui fluid green button" id="btn-register">注册</div>
            </div>

        </form>
    </div>

</div>
</body>
<script>

    $('#reg-form').form({
        fields: {
            username: {
                identifier: 'username',
                rules: [
                    {
                        type: 'minLength[4]',
                        prompt: '用户名至少为4位'
                    }
                ]
            },
            nickname: {
                identifier: 'nickname',
                rules: [
                    {
                        type: 'empty',
                        prompt: '昵称不能为空'
                    }
                ]
            },
            password: {
                identifier: 'password',
                rules: [
                    {
                        type: 'minLength[6]',
                        prompt: '密码至少为6位'
                    }
                ]
            }
            ,
            password2: {
                identifier: 'password2',
                rules: [
                    {
                        type: 'match[password]',
                        prompt: '两次密码不一致'
                    }
                ]
            }
        }
    })
    ;

    $('#btn-register').click(function () {
        $('#reg-form').form("validate form");

        if ($('#reg-form').form("is valid")) {
            $('#reg-form').submit();
        }
    });

</script>


</html>